<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <!--/*--> 引入css、jq、layui等样式、js <!--*/-->
  <meta th:include="~{layout/layout_hread :: head}">
</head>
<body>
<div class="layui-form" id="box" style="margin-top: 20px;">
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-inline" style="width: 350px;">
      <select name="roleName" lay-verify="required" lay-search="">
        <option value="">请选择一个未授权角色</option>
        <option th:each="role:${roleList}" th:value="${role.roleName}">[[${role.roleName}]]</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">
      授权资源
    </label>
    <div class="layui-input-inline" style="width: 350px;">
      <input placeholder="URL例示：/**" type="text" id="source" name="source" required="" lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">
      要求符合URL表达式（AntPathMatcher）
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">
      读写权限
    </label>
    <div class="layui-input-block">
      <input type="checkbox" name="action[r]" title="读权限-r" checked>
      <input type="checkbox" name="action[w]" title="写权限-w">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">
      角色描述
    </label>
    <div class="layui-input-block" style="width: 450px;">
      <textarea id="description" name="description" placeholder="请输入角色描述" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
    </div>
  </div>
</div>
<script>
  layui.use(['form', 'jquery'], function () {
    var form = layui.form;
    var $ = layui.jquery;
    var layer = layui.layer;

    //监听提交
    form.on('submit(edit)', function (data) {
      // layer.msg(JSON.stringify(data.field));
      var temp=data.field
      var action=''
      for (var k in temp) {
        if (k == 'action[r]') {
          action = action + 'r'
        }
        if (k == 'action[w]') {
          action = action + 'w'
        }
      }
      temp.action=action
      $.post({
        data: temp,
        url: '/admin/permissionAdd',
        success(data) {
          layer.msg(data.message)
        }
      })
      return false;
    });
  });
</script>
</body>
</html>
